<template>
  <div class="news-container">
    <div class="news-main">
      <div class="left">
        <ul>
          <li
          :class=" navIndex === index ? 'active' : ''"
            v-for="(item,index) in nav"
            :key="index"
            @click="routerLink(index, item.path)"
          >
            <img :src="item.imgUrl"  />
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="right">
        <KeepAlive>
          <router-view>
            <WbNews></WbNews>
          </router-view>
        </KeepAlive>
      </div>
    </div>
  </div>
</template>

<script>
import WbNews from './ZhNews.vue';
export default {
  data() {
    return {
      nav: [
        {
          title: "微博",
          path: "/news/wbnews",
          imgUrl: require("../../../../assets/imgs/news/weibo.png")
        },
        {
          title: "知乎",
          path: "/news/zhnews",
          imgUrl: require("../../../../assets/imgs/news/zhihu.png")
        }
      ],
      navIndex: 0
    };
  },
  components:{
    WbNews
  },
  methods: {
    routerLink(index, path) {
      // 点击哪个路由就赋值给自定义的下下标
      this.navIndex = index;
      // 路由跳转
      this.$router.push(path);
    }
  },
  mounted(){
    if(this.$route.path == "/news/wbnews") this.navIndex = 0
    if(this.$route.path == "/news/zhnews") this.navIndex = 1
    
  }
};
</script>
  
<style lang="less" scoped>
.news-container {
  padding: 0.6rem 7.5rem 0.6rem 7.5rem;
  background-color: var(--bgColor);
  .news-main {
    width: 100%;
    height: auto;
    background-color: var(--cardColor);
    display: flex;
    justify-content: space-around;
    .left {
      width: 20%;
      background-color: var(--cardColor);
      border-right: 1px solid var(--cardLine);
      text-align: center;
      color: var(--font_2);
      font-size: 18px;
      padding-top: 20px;
      li {
        width: 100%;
        height: auto;
        padding: 10px 0px 10px 0px;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        img {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }

      .active {
        background-color: #409eff;
      }
    }
    .right {
      width: 80%;
      background-color: var(--cardColor);
      padding: 0.5rem;
    }
  }
}
</style>